<template>
    <div class="header">
        <img class="w-full pointer-events-none" src="./assets/header.svg" alt="">
        <div class="title">安防监控大屏</div>
        <div class="corner text w-[159px] h-9 left-3 top-[9px]">{{data.time}}</div>
        <div class="corner text h-9 right-[69px] top-3 px-4" @click="showMenus" @mouseleave="data.villagesMenusVisible = false">
            {{data.selectedVillage && data.selectedVillage.villageName || '...'}}
            <img class="ml-1" src="./assets/arrow-down.svg" alt="">
            <div v-if="data.villagesMenusVisible" class="menus">
            <div>
                <div v-for="p in data.villages" @click.stop="selected(p)">
                   {{p.villageName}}
                </div>
            </div>
            </div>
        </div>
        <div class="corner text w-[51px] h-9 right-2 top-3" @click="$emit('switch-fullscreen')">
            <img v-if="isFullscreen()" src="./assets/取消全屏.svg" alt="">
            <img v-else src="./assets/全屏.svg" alt="">
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
import moment from "moment";
import { projectList } from "src/views/basic/project/api";

export default defineComponent({
    setup(props, { emit }) {

        onMounted(refresh)

        const data = reactive({
            villages: [] as any[],
            villagesMenusVisible: false,
            selectedVillage: null as null | any,
            time: '0000-00-00 00:00'
        })

        let timer = 0
        onMounted(() => {
            window.clearInterval(timer)
            timer = window.setInterval(() => {
                const date = new Date()
                const hasComma = Math.floor((new Date()).getTime() / 1000) % 2
                data.time = moment(date).format(`YYYY-MM-DD HH${hasComma ? ':':' '}mm`)
            },1000)
        })
        onUnmounted(() => window.clearInterval(timer))

        async function refresh() {
            data.villages = (await projectList({ page: 1, pageSize: 1000 })).data.records ?? []
            if (!data.selectedVillage && data.villages.length) {
                selected(data.villages[0])
            }
        }

        function selected(village: any) {
            data.selectedVillage = village
            emit('select:village', village);
            data.villagesMenusVisible = false;
        }

        function isFullscreen() {
            return !!document.fullscreenElement
        }

        function showMenus() {
            data.villagesMenusVisible = true
            refresh()
        }

        return {
            data,
            isFullscreen,
            selected,
            showMenus
        }
    }
})

</script>

<style scoped>
.header {
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 84px;
}

.title {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;

    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 47px;
    text-align: center;
    letter-spacing: 0.06em;

    background: linear-gradient(180deg, #B1CFFC 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;

    filter: drop-shadow(0px 0px 10px #105ED9);
}

.text {
    position: absolute;
    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    text-align: center;

    color: #AEE4F8;
}

.corner {
    border: 5.5px solid transparent;
    border-image-source: url(./assets/border.svg);
    border-image-slice: 5.5 5.5 5.5 5.5;
    transition: all 150ms;
}

.corner:hover {
    border-image-source: url(./assets/border-highlight.svg);
}

.menus {
    position: absolute;
    z-index: 100;
    right: 0;
    top: 100%;
    border-radius: 4px;
    box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    overflow: hidden;
    border: 2px solid #9AF3EE40;
}
.menus::-webkit-scrollbar {
    display: none;
}
.menus>div {
    display: grid;
    grid-template-rows: repeat(12,32px);
    grid-auto-columns: auto;
    grid-auto-flow: column;
    width: min-content;
    min-height: min-content;
    gap: 1px;
    direction: rtl;
    backdrop-filter: blur(8px);
}
.menus>div>div {
    direction: ltr;
    line-height: 32px;
    white-space: nowrap;
    padding: 0 16px;
    flex: none;
}

.menus>div>div:hover {
    box-shadow: inset 0px 0px 6px #9AF3EE;
    color: #9AF3EE;
    border-radius: 4px 4px 4px 4px;
}
</style>